<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时光机</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
    <script src="https://www.unpkg.com/three@0.154.0/build/three.js"></script>
</head>
<body>
    <script>
        let camera, controls, scene, renderer;
        let geometry, material, mesh, stormTexture;

        init();

        function init() {
            const width = window.innerWidth || 2;
            const height = window.innerHeight || 2;

            // 创建场景
            scene = new THREE.Scene();
            renderer = new THREE.WebGLRenderer();
            renderer.setSize(width, height);
            document.body.appendChild(renderer.domElement);

            // 创建相机
            camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
            camera.position.set(0, 0, 500);
            camera.lookAt(scene.position); // 指向scene对应的位置

            // 光源
            const light = new THREE.PointLight(0xffffff);
            light.position.set(0, 0, 500);
            scene.add(light);

            // 物体
            const textureLoader = new THREE.TextureLoader();
            textureLoader.load('assets/shikong.jpg', function(texture) {
                stormTexture = texture;
                texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
                texture.repeat.set(1, 2);

                geometry = new THREE.CylinderGeometry(30, 50, 1000, 32, 32, true);
                material = new THREE.MeshPhongMaterial({
                    transparent: true,
                    alphaMap: texture,
                    side: THREE.DoubleSide
                });
                mesh = new THREE.Mesh(geometry, material);
                mesh.rotation.x = -Math.PI / 2;
                scene.add(mesh);
                render();
            });
        }

        let H = 0; // 控制颜色

        function render() {
            renderer.render(scene, camera);

            H += 0.001;
            if (H >= 1) {
                H = 0;
            }
            mesh.material.color.setHSL(H, 0.5, 0.5);
            mesh.rotation.y += 0.01;
            stormTexture.offset.y += 0.01;

            requestAnimationFrame(render);
        }
    </script>
</body>
</html>